﻿<!DOCTYPE html>
<html>
<head>
    <title>地图导览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0;
            outline: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        a {
            text-decoration: none;
        }
        html {
            height: 100%;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            font-family: 'Microsoft Yahei',Tahoma,Helvetica,Arial,sans-serif;
            font-size: 62.5%;
            position: relative;
        }

        ul, li {
            list-style: none;
        }

        .content {
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .map {
            width: 1600px;
            position: relative;
            overflow: hidden;
        }

            .map img {
                width: 100%;
            }

        .marker-list {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .marker {
            position: absolute;
            width: 30px;
            height: 35px;
        }

        .point {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 35px;
            background: url(images//icons.png) 0 -205px no-repeat;
            z-index: 1;
        }

        .tip {
            position: absolute;
            left: 50%;
            top: 0;
            width: 300px;
            height: auto;
            -moz-transform: translate3d(-50%,-100%,0);
            -ms-transform: translate3d(-50%,-100%,0);
            -o-transform: translate3d(-50%,-100%,0);
            -webkit-transform: translate3d(-50%,-100%,0);
            transform: translate3d(-50%,-100%,0);
            background-color: #FFF;
            box-shadow: 0 0 5px #535658;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 1000;
            display: none;
        }

        .tip-title {
            position: relative;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #E5E5E5;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

            .tip-title h3 {
                float: left;
                height: 30px;
                color: #44b549;
                line-height: 30px;
                padding-left: 10px;
                font-weight: normal;
                font-size: 16px;
                text-shadow: 0 1px 1px #FFF;
            }

            .tip-title .close {
                position: absolute;
                right: 5px;
                top: 8px;
                width: 13px;
                height: 13px;
                background: url(images/close.png) 0 0 no-repeat;
            }

        .tip-content {
            padding: 15px;
            font-size: 14px;
        }

        .tip-bottom {
            width: 100%;
            border-top: 1px solid #E5E5E5;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

            .tip-bottom ul {
                width: 100%;
            }

                .tip-bottom ul li {
                    float: left;
                    width: 50%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 14px;
                    box-sizing: border-box;
                }

                    .tip-bottom ul li:first-child {
                        border-right: 1px solid #E5E5E5;
                    }

        .triangle {
            width: 0;
            height: 0;
            left: 50%;
            bottom: -8px;
            margin-left: -8px;
            border-width: 8px 8px 0;
            border-style: solid;
            border-color: #fff transparent transparent;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="map">
            <div class="marker-list" data-bind="foreach:markers">
                <div class="marker" data-bind="click:$root.showtip,style:{left:left+'px',top:top+'px'}">
                    <i class="point"></i>
                    <div class="tip" data-bind="attr:{id:'tip_'+id}">
                        <div class="tip-title">
                            <h3 data-bind="text:name"></h3>
                            <i class="close" data-bind="click:$root.close,clickBubble: false"></i>
                        </div>
                        <div class="tip-content" data-bind="text:remark"></div>
                        <div class="tip-bottom">
                            <ul>
                                <li data-bind="click:$root.view">查看详情</li>
                                <li data-bind="click:$root.goto">去这里</li>
                            </ul>
                        </div>
                        <i class="triangle"></i>
                    </div>
                </div>
            </div>
            <img src="images/map.jpg" alt="" />
        </div>
    </div>
    <script src="../../scripts/jquery/zepto.min.js"></script>
    <script src="../../scripts/knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        var ViewModel = function () {
            var self = this;
            this.markers = ko.observableArray();

            var loadData = function () {
                $.ajax({
                    url: '/WebServices/MapWebService.asmx/GetMarkers',
                    dataType: "json",
                    data: { wid: 1 },
                    success: function (res) {
                        if (res.success) {
                            self.markers(res.result);
                        }
                        else {
                            alert(res.error.message);
                        }
                    }
                });
            };

            self.showtip = function (marker) {
                $(".tip").hide();
                $('#tip_' + marker.id).show();
            }
            self.close = function (marker) {
                $('#tip_' + marker.id).hide();
            }

            self.view = function (marker) {
                document.location.href = marker.url;
            }
            self.goto = function (marker) {
                document.location.href = 'map_address.html?id=' + marker.id;
            }
            loadData();
        }

        $(function () {
            $('.content').scrollTop(100);
            $('.content').scrollLeft(400);

            var viewModel = new ViewModel();
            ko.applyBindings(viewModel);
        });
    </script>
</body>
</html>
